<script setup lang="ts">
interface Goods {
  id: string | number
  picture: string
  name: string
  desc?: string // 使用 ? 表示可选属性
  price: number | string
}

interface Props {
  goods: Goods | null // 明确允许 null
}
defineProps<Props>()
</script>

<template>
  <div class="goodsItem">
    <RouterLink :to="`/detail/${goods?.id}`">
      <!-- 使用可选链操作符和空值检查 -->
      <img v-if="goods?.picture" v-lazy="goods.picture" :alt="goods?.name" />
      <div v-else class="image-placeholder">暂无图片</div>

      <div class="p">
        <p class="name">{{ goods?.name || '商品名称' }}</p>
        <p class="desc">{{ goods?.desc || '暂无描述' }}</p>
        <p class="price">￥{{ goods?.price || '0.00' }}</p>
      </div>
    </RouterLink>
  </div>
</template>

<style lang="scss" scoped>
.goodsItem {
  width: 200px;
  height: 300px;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease; // 添加过渡效果
  a {
    text-decoration: none;
  }
  &:hover {
    transform: translate3d(0, -3px, 0);
    box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
  }
  img,
  .image-placeholder {
    width: 100%;
    height: 200px;
  }
  .p {
    color: black;
    text-align: center;
    .name {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 14px;
      padding-top: 5px;
    }
    .desc {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 12px;
      padding-top: 5px;
      font-weight: 300;
    }
    .price {
      color: red;
      padding-top: 5px;
    }
  }
}
</style>
